<template>
    <div ref="chartRef" style="height: 300px;width: 500px;border: 1px solid #000;"></div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue"
import * as echarts from "echarts"
const props = defineProps({
    options: {
        type: Object,
        default: {}
    }

})
watch(() => props.options, (newVal) => {
    myChart.setOption(newVal)
}, { deep: true })

const chartRef = ref()
let myChart = null

function initChart() {
    myChart = echarts.init(chartRef.value)
    myChart.setOption(props.options)

}

onMounted(() => {
    initChart()
})
</script>
<style lang='scss' scoped></style>